(function($) {


	var name = new Array();
	var games = new Array();
	var gamesname = new Array();
	var gamesnum = new Array();
	for (var i = 0; i < 6; i++) {
		games[i] = new Array();
	}
	var mynews = new Vue({
		el: '#gameorder',
		data: {
			gameorder: [{
				name: '',
				num: ''
			}],
			gameallinfo: [],
			selectid: 0
		},
		created: function() {
			var _this = this;
			$.ajax({
				url: '../data/gameorder.json',
				/*相对页面的请求路径*/
				type: 'get',
				data: {},
				async: false,
				dataType: 'json',
				success: function(data) {
					/*当我们做一次请求的时候需要记录*/
					_this.gameallinfo = data.games;
					for (var i = 0; i < data.games.length; i++) {
						_this.gameorder[i] = {};
						_this.gameorder[i].name = data.games[i].N_name;
						_this.gameorder[i].num = data.games[i].games[0];
					}
				}
			});
		},
		methods: {
			getinfo: function(event) {
				var x = parseInt(event.target.value) - 1;
				if (x >= 0) {
					for (var i = 0; i < this.gameallinfo.length; i++) {
						this.gameorder[i] = {};
						this.gameorder[i].name = this.gameallinfo[i].N_name;
						this.gameorder[i].num = this.gameallinfo[i].games[x];
					}
				}
			}

		}
	});
	$.ajax({
		url: '../data/gamedata.json',
		/*相对页面的请求路径*/
		type: 'get',
		data: {},
		async: false,
		dataType: 'json',
		success: function(data) {
			/*当我们做一次请求的时候需要记录*/
			var ginfo = data.games;
			var i = 0;
			for (var x of ginfo) {
				name[i] = x.N_name;
				for (var j = 0; j < x.games.length; j++) {
					games[j][i] = x.games[j];
				}
				i++
			}
		}
	});
	$.ajax({
		url: '../data/gameinfo.json',
		/*相对页面的请求路径*/
		type: 'get',
		data: {},
		async: false,
		dataType: 'json',
		success: function(data) {
			/*当我们做一次请求的时候需要记录*/
			gamesname = data.gamesinfo[2].games;
			gamesnum = data.gamesinfo[2].num;

		}
	});
	try {
		//radar chart
		var ctx = document.getElementById("radarChart");
		if (ctx) {
			ctx.height = 240;
			var myChart = new Chart(ctx, {
				type: 'radar',
				data: {
					labels: gamesname,
					defaultFontFamily: 'Poppins',
					datasets: [{
						label: "游戏受欢迎程度",
						data: gamesnum,
						borderColor: "rgba(0, 123, 255, 0.6)",
						borderWidth: "1",
						backgroundColor: "rgba(0, 123, 255, 0.4)"
					}]
				},
				options: {
					legend: {
						position: 'top',
						labels: {
							fontFamily: 'Poppins'
						}

					},
					scale: {
						ticks: {
							beginAtZero: true,
							fontFamily: "Poppins"
						}
					}
				}
			});
		}

	} catch (error) {
		console.log(error)
	}



	try {

		// single bar chart
		var ctx = document.getElementById("singelBarChart");
		if (ctx) {
			ctx.height = 150;
			var myChart = new Chart(ctx, {
				type: 'bar',
				data: {
					labels: name,
					datasets: [{
							label: "盒子模型",
							data: games[0],
							borderColor: "rgba(255, 192, 0, 0.9)",
							borderWidth: "0",
							backgroundColor: "rgba(255, 192, 0, 0.5)"
						},
						{
							label: "元素类型转换",
							data: games[1],
							borderColor: "rgba(0,112,192,0.9)",
							borderWidth: "0",
							backgroundColor: "rgba(0,112,192,0.7)",
							fontFamily: "Poppins"
						},

						{
							label: "弹性布局",
							data: games[2],
							borderColor: "rgba(255,0,0,0.9)",
							borderWidth: "0",
							backgroundColor: "rgba(255,0,0,0.7)",
							fontFamily: "Poppins"
						},

						{
							label: "浮动与定位",
							data: games[3],
							borderColor: "rgba(21,92,25,0.9)",
							borderWidth: "0",
							backgroundColor: "rgba(21,92,25,0.7)",
							fontFamily: "Poppins"
						},
						{
							label: "精灵图",
							data: games[4],
							borderColor: "rgba(192,2,205,0.9)",
							borderWidth: "0",
							backgroundColor: "rgba(192,2,205,0.7)",
							fontFamily: "Poppins"
						},
						{
							label: "动画",
							data: games[5],
							borderColor: "rgba(128,244,254,0.9)",
							borderWidth: "0",
							backgroundColor: "rgba(128,244,254,0.7)",
							fontFamily: "Poppins"
						}
					]
				},
				options: {
					legend: {
						position: 'top',
						labels: {
							fontFamily: 'Poppins'
						}

					},
					scales: {
						xAxes: [{
							ticks: {
								fontFamily: "Poppins"

							}
						}],
						yAxes: [{
							ticks: {
								beginAtZero: true,
								fontFamily: "Poppins"
							}
						}]
					}
				}
			});
		}

	} catch (error) {
		console.log(error);
	}

})(jQuery);
